import { useState } from 'react';
import { Breadcrumb, Menu, type MenuProps } from 'antd';
import { Outlet, useNavigate, useParams } from 'react-router-dom';
import { DesktopOutlined, FormOutlined, ProjectOutlined, SoundOutlined, TeamOutlined } from '@ant-design/icons';
import './Member.scss';

export const Member = () => {

  const navigate = useNavigate();


  // 侧边菜单栏
  const menuItems: Required<MenuProps>['items'][number][] = [
    {
      key: '/member/orderList',
      label: '挂号订单',
      icon: <DesktopOutlined />,
    },

    {
      key: '/member/user',
      label: '实名认证',
      icon: <FormOutlined />,
    },

    {
      key: '/member/patient',
      label: '就诊人管理',
      icon: <TeamOutlined />,
    },
    {
      key: '/member/account',
      label: '账号信息',
      icon: <ProjectOutlined />,
    },
    {
      key: '/member/opinion',
      label: '意见反馈',
      icon: <SoundOutlined />,
    },

  ];
  // 当前的路由地址
  const [defaultSelectKey, setDefaultSelectKey] = useState<string>(`/member/orderList`);
  /**
   *
   * @description点击左侧菜单栏的回调函数
   *
   * */
  const onClick: MenuProps['onClick'] = (e) => {
    setDefaultSelectKey(e.key);
    navigate(e.key);
  };

  return (
    <div className="member">
      <div className="container">
        <div className="breadcrumb">
          <Breadcrumb items={[{ title: '会员中心' }]}></Breadcrumb>
        </div>
        <div className="main">
          <div className="menu">
            <Menu onClick={onClick} style={{ width: 200 }} mode="inline" defaultSelectedKeys={[defaultSelectKey]} items={menuItems} />
          </div>
          <div className="outlet">
            <Outlet></Outlet>
          </div>
        </div>
      </div>
    </div>
  );
};


export default Member;
